/**
 * 组件名称：平台特性组件
 * 使用场景：首页平台介绍时使用
 * 功能介绍：6个卡片，支持响应式布局
 * 功能进度：100%
 * 待办事项：无
 */

import {Container, SimpleGrid, Card, ThemeIcon, Title, Text, rem} from "@mantine/core";
import {
  IconBrandDatabricks,
  IconMoodSmile,
  IconBrowser,
  IconRotateClockwise,
  IconLayoutSidebarLeftCollapse,
  IconMoonStars,
} from "@tabler/icons-react";

import classes from "./IpdFeatures.module.css";
const features = [
  {
    title: "数据底座",
    icon: IconBrandDatabricks,
    description:
      "构建牢固的、可持续发展的数据底座。科学的数据建模是根本，精心设计的数据维护流程是核心。图数据库、关系型数据库、文档型数据库，根据数据的不同特点采取不同的存储方式。",
  },
  {
    title: "用户体验",
    icon: IconMoodSmile,
    description:
      "贯彻“B端设计C端化”的设计理念。做好用的产品，做让人耳目一新的产品，做用户喜欢用的产品。在逻辑与效率的基本要求上，重视交互体验，用心实现技术与美学的完美平衡。",
  },
  {
    title: "线上场景",
    icon: IconBrowser,
    description:
      "拒绝平庸的“倒表”设计。之所以线上化，就是因为浏览器能支持多种数据维护的交互手段和数据展现的形式。若还只是站在表格维度进行增删改查，那与线下流程中的WPS + VBA何异！",
  },
  {
    title: "流程闭环",
    icon: IconRotateClockwise,
    description:
      "建立完整的任务流程及系统通知功能，从创建任务到提交成果，一切都有迹可循。简化心智负担，点击任务列表到达指定页面，完成指定任务，全套流程构成逻辑闭环。",
  },
  {
    title: "响应布局",
    icon: IconLayoutSidebarLeftCollapse,
    description:
      "支持响应式布局。现代化的应用要求前端设计在不同设备尺寸、不同窗口尺寸下的最佳展示。本平台全面考虑响应式布局的需求，满足不同使用场景下的前端交互的可持续性。",
  },
  {
    title: "暗色模式",
    icon: IconMoonStars,
    description:
      "一套系统，两种主题。在深色技术相当成熟的今天，网页端应该与时俱进，及时进行全站的暗色模式的适配，在用户需要暗色的时候，点击主题切换按钮即可进入暗色模式。",
  },
];

interface FeatureProps {
  title: React.ReactNode;
  icon: React.FC<any>;
  description: React.ReactNode;
}

// 单个卡片
const Feature = ({icon: Icon, title, description}: FeatureProps) => {
  return (
    <Card shadow="sm" padding="sm" radius="md">
      <ThemeIcon variant="light" size={40} radius={40}>
        <Icon style={{width: rem(22), height: rem(22)}} />
      </ThemeIcon>
      <Text mt="sm" mb={7}>
        {title}
      </Text>
      <Text size="sm" c="dimmed" lh={1.6}>
        {description}
      </Text>
    </Card>
  );
};

// 多个卡片带布局
export const IpdFeatures = () => {
  return (
    <Container size="lg" pt={100}>
      <Title ta="center">经过深度思考的设计理念</Title>

      <Container size={560} p={0}>
        <Text size="sm" mt="md" className={classes.description}>
          B端系统设计也要追求C端化，平庸的设计仅重视功能的实现，高端的设计才会注重功能和交互的相辅相成。本系统有如下设计理念：
        </Text>
      </Container>

      <SimpleGrid
        mt={60}
        cols={{base: 1, sm: 2, md: 3}}
        spacing={{base: "xl", md: 50}}
        verticalSpacing={{base: "xl", md: 50}}
      >
        {features.map((feature, index) => (
          <Feature {...feature} key={index} />
        ))}
      </SimpleGrid>
    </Container>
  );
};
